<!--此案例中主要实现了几个效果:
	以js,jq为主
1.checkbox控制最多只能选择几个,且超过选项后,禁止选择
2.树结构中的每一项进行拖拽到指定位置进行请求
3.通过按钮控制 多个格子切换,且窗口可实现拖拽换位  -->
<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="icon" href="images/favicon.ico">
	<title>小诺快速开发平台</title>
	<link rel="stylesheet" href="libs/layui/css/layui.css" />
	<link rel="stylesheet" href="module/admin.css" />
</head>
<style>
	.btn-row {
		display: flex;
		flex: 1;
		align-items: center;
	}

	.btn-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0 16px;
	}

	.img {
		width: 50px;
		height: 50px;
	}

	.img:hover {
		cursor: pointer;
		border-bottom: 1px orange solid;
	}

	.line {

		width: 4px;
		height: 100%;
		background-color: #aaabb224;
		margin-left: 4px;
	}

	.left-tree {
		height: 75%;
		width: 35%;
		margin-left: 10px;
		margin-right: 20px;
		border: solid black 1px;
		overflow: auto;
	}

	.fb-wrapper {
		display: flex;
		height: 50%;
	}

	.fb-each {
		flex: 1;
		border: 1px black solid;
		margin: 0 20px 20px 20px;
		height: 85%;
	}

	.all-box {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 80%;
	}

	.tree-wrapper {
		display: flex;
		flex-direction: column;
		margin: 2px 0 0 60px;
		display: none;

	}

	.each-tree {
		font-weight: 400;
	}

	.ckbox {
		margin-right: 6px;
	}

	.ckbox,
	.each-row-title:hover {
		cursor: pointer;
		background-color: wheat;
	}
	.icon-title-wrapper {
		margin: 5px 0 0 20px;
		display: flex;
		font-weight: 800;
	}

	.img-arrow {
		width: 20px;
		height: 20px;
	}

	.img-arrow,
	.title:hover {
		cursor: pointer;
	}

	.notclick {
		pointer-events: none;

	}

	.notclick:hover {
		cursor: not-allowed;
	}

	.each-box-wrapper {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.each-box-wrapper li {
		float: left;
		width: 45%;
		height: 46%;
		overflow: hidden;
		border: 1px solid #999;
	}

	.each-box-wrapper li.hig {
		width: 45%;
		height: 46%;
		overflow: hidden;
		border: 2px dashed blue;
	}
</style>

<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
		<!-- 头部 -->
		<div class="layui-header"
			style="height: 100px;background-color:#a2d5d740;display: flex;font-size: 10px;box-shadow: 0 4px 0 0 #d9d9d9;">
			<div class="btn-row">
				<div id="startbtn" class="btn-wrapper">
					<image class="img" src="/images/logo.png">
						<p>数据源A</p>
				</div>
				<div id="startbtn" class="btn-wrapper">
					<image class="img" src="/images/logo.png">
						<p>数据源B</p>
				</div>
				<div id="startbtn" class="btn-wrapper">
					<image class="img" src="/images/logo.png">
						<p>数据源C</p>
				</div>
				<div id="startbtn" class="btn-wrapper">
					<image class="img" src="/images/logo.png">
						<p>数据源D</p>
				</div>
			</div>

			<div class="line"></div>

			<div class="btn-row">
				<div id="startbtn" class="btn-wrapper">
					<image class="img" src="/images/logo.png">
						<p>XXXX</p>
				</div>
				<div id="startbtn" class="btn-wrapper">
					<image class="img" src="/images/logo.png">
						<p>开始</p>
				</div>
				<div id="startbtn" class="btn-wrapper">
					<image class="img" src="/images/logo.png">
						<p>暂停</p>
				</div>
				<div id="startbtn" class="btn-wrapper">
					<image class="img" src="/images/logo.png">
						<p>结束</p>
				</div>
				<div id="startbtn" class="btn-wrapper">
					<image class="img" src="/images/logo.png">
						<p>TD干预</p>
				</div>
			</div>


			<div class="line"></div>

			<div class="btn-row">
				<div id="four-box" class="btn-wrapper">
					<image class="img" id="img-four" src="/images/logo.png">
						<p>四格</p>
				</div>
				<div id="six-box" class="btn-wrapper">
					<image class="img" id="img-six" src="/images/logo.png">
						<p>六格</p>
				</div>
				<div id="eight-box" class="btn-wrapper">
					<image class="img" id="img-eight" src="/images/logo.png">
						<p>八格</p>
				</div>
				<div id="nine-box" class="btn-wrapper">
					<image class="img" id="img-nine" src="/images/logo.png">
						<p>九格</p>
				</div>
			</div>


			<div class="line"></div>






		</div>
		<!-- 主体部分 -->
		<div class="layui-body" style="height: 800px;top: 120px;display: flex;">
			<!-- 左侧树列表 -->
			<div class="left-tree">
				<div class="icon-title-wrapper" id="group1">
					<image class="img-arrow" id="img-arrow-g1" src="./images/arrow-right.png">
						<div class="title">曲线参数分组1</div>
				</div>
				<ul class="tree-wrapper" id="group1-con">
					<li class="each-tree" id="dtnxloc">
						<input class="ckbox" value="东天南x向位置" id="dtnxloci" type="checkbox" title="东天南x向位置">
						<label class="each-row-title"  for="dtnxloci" draggable="true">东天南x向位置</label>
					</li>
					<li class="each-tree" id="dtnyloc" draggable="true">
						<input class="ckbox" id='dtnyloci' value="东天南y向位置" type="checkbox" title="东天南y向位置">
						<label class="each-row-title" for="dtnyloci">东天南y向位置</label>
					</li>
					<li class="each-tree" id="dtnzloc" draggable="true">
						<input class="ckbox" id='dtnzloci' value="东天南z向位置" type="checkbox" title="东天南z向位置">
						<label class="each-row-title" for="dtnzloci">东天南z向位置</label>
					</li>
					<li class="each-tree" id="hspeedv" draggable="true">
						<input class='ckbox' value="合速度v" id="hespeedv" type="checkbox" title="合速度v">
						<label class="each-row-title" for="hespeedv">合速度v</label>
					</li>
					<li class="each-tree" id="dtnxspeed" draggable="true">
						<input class="ckbox" id='dtnxspeedi' value="东天南x向速度" type="checkbox" title="东天南x向速度">
						<label class="each-row-title" for="dtnxspeedi">东天南x向速度</label>
					</li>
					<li class="each-tree" id="dtnyspeed" draggable="true">
						<input class="ckbox" id='dtnyspeedi' type="checkbox" value="东天南y向速度" title="东天南y向速度">
						<label class="each-row-title" for="dtnyspeedi">东天南y向速度</label>
					</li>
					<li class="each-tree" id="dtnzspeed" draggable="true">
						<input class="ckbox" class="ckbox" value="东天南z向速度" id='dtnzspeedi' type="checkbox"
							title="东天南z向速度">
						<label class="each-row-title" for="dtnzspeedi">东天南z向速度</label>
					</li>
					<li class="each-tree" id="gddata-time" draggable="true">
						<input class="ckbox" id='gddatatime' value="惯导数据对应的时间" type="checkbox" title="惯导数据对应的时间">
						<label class="each-row-title" for="gddatatime">惯导数据对应的时间</label>
					</li>
					<li class="each-tree" id="dtnxloclzjsj" draggable="true">
						<input class="ckbox" id='dtnxjsj' value="东天南x向位置来自接收机" type="checkbox" title="东天南x向位置来自接收机">
						<label class="each-row-title" for="dtnxjsj">东天南x向位置来自接收机</label>
					</li>
				</ul>

				<div class="icon-title-wrapper" id="group2">
					<image id="img-arrow-g2" class="img-arrow" src="./images/arrow-right.png">
						<div class="title">曲线参数分组2</div>
				</div>
				<ul class="tree-wrapper" id="group2-con">
					<li class="each-tree" id="dtnyloclzjsj" draggable="true">
						<input class="ckbox" id="dtnylocjsj" value="东天南y向位置来自接收机" type="checkbox" title="东天南y向位置来自接收机">
							<label  class="each-row-title" for="dtnylocjsj">东天南y向位置来自接收机</label>
					</li>
					<li class="each-tree" id="dtnzloclzjsj" draggable="true">
						<input class="ckbox" id='dtnzlocjsj' type="checkbox" value="东天南z向位置来自接收机" title="东天南z向位置来自接收机">
						<label  class="each-row-title" for="dtnzlocjsj">东天南z向位置来自接收机</label>
					</li>
					<li class="each-tree" id="dtnxspeedjsj" draggable="true">
						<input class="ckbox" id='dtnxspeedjsj' type="checkbox" value="东天南x向速度接收机" title="东天南x向速度接收机">
							<label  class="each-row-title" for="dtnxspeedjsj">东天南x向速度接收机</label>
					</li>
					<li class="each-tree" id="dtnyspeedjsj" draggable="true">
						<input class="ckbox" id="dtnyspeedjsji" type="checkbox" value="东天南y向速度接收机" title="东天南y向速度接收机">
						<label  class="each-row-title" for="dtnyspeedjsji">东天南y向速度接收机</label>
					</li>
					<li class="each-tree" id="dtnzspeedlzjsj" draggable="true">
						<input class="ckbox" id='dtnzspeedjsj' type="checkbox" value="东天南z向速度来自接收机" title="东天南z向速度来自接收机">
							<label  class="each-row-title" for="dtnzspeedjsj">东天南z向速度来自接收机</label>
					</li>
					<li class="each-tree" id="week-second" draggable="true">
						<input class="ckbox" id='zm' type="checkbox" value="周秒" title="周秒">
						<label  class="each-row-title" for="zm">周秒</label>
					</li>
					<li class="each-tree" id="ball-instance" draggable="true">
						<input class="ckbox" id='ballrange' type="checkbox" value="圆球射程" title="圆球射程">
							<label  class="each-row-title" for="ballrange">圆球射程</label>
					</li>
					<li class="each-tree" id="dxdheight" draggable="true">
						<input class="ckbox" id='pointheight' type="checkbox" value="弹下点高度" title="弹下点高度">
							<label  class="each-row-title" for="pointheight">弹下点高度</label>
					</li>
					<li class="each-tree" id="fyztj" draggable="true">
						<input class="ckbox" id='fyztj' type="checkbox" value="俯仰姿态角" title="俯仰姿态角">
						<label  class="each-row-title" for="fyztj">俯仰姿态角</label>
					</li>
				</ul>

				<div class="icon-title-wrapper" id="group3">
					<image id="img-arrow-g3" class="img-arrow" src="./images/arrow-right.png">
						<div class="title">曲线参数分组3</div>
				</div>
				<ul class="tree-wrapper" id="group3-con">
					<li class="each-tree" id="phztj" draggable="true">偏航姿态角</li>
					<li class="each-tree" id="gdztj" draggable="true">滚动姿态角</li>
					<li class="each-tree" id="yjgjtime" draggable="true">一级关机时间</li>
					<li class="each-tree" id="qxsk" draggable="true">起旋时刻</li>
					<li class="each-tree" id="sfqye1" draggable="true">释放轻诱饵1_1</li>
					<li class="each-tree" id="sfqye2" draggable="true">释放轻诱饵2_1</li>
					<li class="each-tree" id="sftfzz1" draggable="true">释放突防装置1</li>
					<li class="each-tree" id="sftfzz2" draggable="true">释放突防装置2有源干扰机</li>
					<li class="each-tree" id="yesfdcf" draggable="true">诱饵释放电磁阀2</li>
				</ul>

				<div class="icon-title-wrapper" id="group4">
					<image id="img-arrow-g4" class="img-arrow" src="./images/arrow-right.png">
						<div class="title">曲线参数分组4</div>
				</div>
				<ul class="tree-wrapper" id="group4-con">
					<li class="each-tree" id="yyyedcjh" draggable="true">有源诱饵电池激活4</li>
					<li class="each-tree" id="zjbwclgl" draggable="true">撞击部位测量功率转换</li>
					<li class="each-tree" id="yjgjztz" draggable="true">一级关机状态字</li>
					<li class="each-tree" id="2tnyygrzzdc" draggable="true">2筒内有源干扰装置电池遥测电压</li>
					<li class="each-tree" id="4tnyygrzzdc" draggable="true">4筒内有源干扰装置电池遥测电压</li>
					<li class="each-tree" id="jyfckyl" draggable="true">减压阀出口压力</li>
					<li class="each-tree" id="gtfdjrss" draggable="true">固体发动机燃烧室压力</li>
					<li class="each-tree" id="mxqpyl" draggable="true">末修气瓶压力</li>
					<li class="each-tree" id="grzztc" draggable="true">干扰装置1填充气体压力</li>
				</ul>
			</div>

			<!-- 方格 -->
			<div class="all-box">
				<ul id="box-four" class="each-box-wrapper" style="display: none;">
					<li class="each-box" id="4first-one"> 11</li>
					<li class="each-box" id="4first-two">12</li>
					<li class="each-box" id="4second-one">21</li>
					<li class="each-box" id="4second-two">22</li>
				</ul>
				<ul id="box-six" class="each-box-wrapper" style="display: none;">
					<li class="each-box" id="6first-one"> 11</li>
					<li class="each-box" id="6first-two">12</li>
					<li class="each-box" id="6first-three">21</li>
					<li class="each-box" id="6second-one">22</li>
					<li class="each-box" id="6second-two">22</li>
					<li class="each-box" id="6second-three">22</li>
				</ul>
				<ul id="box-eight" class="each-box-wrapper" style="display: none;">
					<li class="each-box" id="8first-one"> 11</li>
					<li class="each-box" id="8first-two">12</li>
					<li class="each-box" id="8first-three">21</li>
					<li class="each-box" id="8first-four">22</li>
					<li class="each-box" id="8second-one">22</li>
					<li class="each-box" id="8second-two">22</li>
					<li class="each-box" id="8second-three">22</li>
					<li class="each-box" id="8second-four">22</li>
				</ul>
				<ul id="box-nine" class="each-box-wrapper" style="display: none;">
					<li class="each-box" id="9first-one"> 11</li>
					<li class="each-box" id="9first-two"> 11</li>
					<li class="each-box" id="9first-three"> 11</li>
					<li class="each-box" id="9second-one"> 11</li>
					<li class="each-box" id="9second-two"> 11</li>
					<li class="each-box" id="9second-three"> 11</li>
					<li class="each-box" id="9third-one">12</li>
					<li class="each-box" id="9third-two">21</li>
					<li class="each-box" id="9third-three">22</li>
				</ul>
			</div>

		</div>
		<!-- 底部 -->
		<div class="layui-footer layui-text" style="display: none;">asdfa</div>
		<!-- js部分 -->
		<script src="libs/layui/layui.js"></script>
		<script src="js/common.js"></script>
		<script src="libs/echarts/echarts.min.js"></script>
		<script src="libs/jquery/jquery-3.2.1.min.js"></script>
		<script>
			layui.use(['layer', 'element', 'tree', 'admin', 'index', 'laytpl',
				'element', 'notice', 'xnUtil'], function () {
					var $ = layui.jquery;
					var admin = layui.admin;
					var index = layui.index;
					var laytpl = layui.laytpl;
					var element = layui.element;
					var xnUtil = layui.xnUtil;
					var tree = layui.tree;
					var layer = layui.layer;





				});
			$(function () {
				var zIndexFour = 1;
				var zIndexSix = 1;
				var zIndexEight = 1;
				var zIndexNine = 1;

				var aPos = [];
				var oBoxFour = document.getElementById('box-four');
				var aLiFour = oBoxFour.getElementsByTagName("li");
				var oBoxSix = document.getElementById('box-six');
				var aLiSix = oBoxSix.getElementsByTagName("li");
				var oBoxEight = document.getElementById('box-eight');
				var aLiEight = oBoxEight.getElementsByTagName("li");
				var oBoxNine = document.getElementById('box-nine');
				var aLiNine = oBoxNine.getElementsByTagName("li");
				function refreshLayout(aLi, zIndex) {
					aPos = []
					//布局转换
					for (i = 0; i < aLi.length; i++) {
						console.log(aLi[i].offsetTop)

						aLi[i].index = i;
						aLi[i].style.top = aLi[i].offsetTop + "px";
						aLi[i].style.left = aLi[i].offsetLeft + "px";
						aLi[i].style.margin = "0 15px 15px 0";
						aPos.push({
							"left": aLi[i].offsetLeft,
							"top": aLi[i].offsetTop
						})
					}
					for (i = 0; i < aLi.length; i++) {
						aLi[i].style.position = "absolute";
						drag(aLi[i], aLi, zIndex)
					}
				}
				//拖拽函数
				function drag(obj, aLi, zIndex, handle) {
					var handle = handle || obj;
					handle.style.cursor = "move";
					handle.onmousedown = function (event) {
						var event = event || window.event;
						var disX = event.clientX - this.offsetLeft;
						var disY = event.clientY - this.offsetTop;
						var oNear = null;
						obj.style.zIndex = zIndex++;
						document.onmousemove = function (event) {
							var event = event || window.event;
							var iL = event.clientX - disX;
							var iT = event.clientY - disY;
							var maxL = obj.parentNode.clientWidth - obj.offsetWidth;
							var maxT = obj.parentNode.clientHeight - obj.offsetHeight;

							iL < 0 && (iL = 0);
							iT < 0 && (iT = 0);
							iL > maxL && (iL = maxL);
							iT > maxT && (iT = maxT);
							obj.style.left = iL + "px";
							obj.style.top = iT + "px";

							for (i = 0; i < aLi.length; i++) aLi[i].className = "";

							oNear = findNearest(obj, aLi);

							oNear && (oNear.className = "hig");

							return false
						};
						document.onmouseup = function () {
							document.onmousemove = null;
							document.onmouseup = null;
							if (oNear) {
								var tIndex = obj.index;
								obj.index = oNear.index;
								oNear.index = tIndex;
								startMove(obj, aPos[obj.index]);
								startMove(oNear, aPos[oNear.index], function () {

								});
								oNear.className = "";
							} else {
								startMove(obj, aPos[obj.index])
							}
							handle.releaseCapture && handle.releaseCapture()
						};
						this.setCapture && this.setCapture();
						return false
					}
				}

				//找出相遇点中最近的元素
				function findNearest(obj, aLi) {
					var filterLi = [];
					var aDistance = [];

					for (i = 0; i < aLi.length; i++) aLi[i] != obj && (isButt(obj, aLi[i]) && (aDistance.push(getDistance(obj, aLi[i])), filterLi.push(aLi[i])));

					var minNum = Number.MAX_VALUE;
					var minLi = null;

					for (i = 0; i < aDistance.length; i++) aDistance[i] < minNum && (minNum = aDistance[i], minLi = filterLi[i]);

					return minLi
				}



				//求两点之间的距离
				function getDistance(obj1, obj2) {
					var a = (obj1.offsetLeft + obj1.offsetWidth / 2) - (obj2.offsetLeft + obj2.offsetWidth / 2);
					var b = (obj1.offsetTop + obj1.offsetHeight / 2) - (obj2.offsetTop + obj2.offsetHeight / 2);
					return Math.sqrt(a * a + b * b)
				}

				//碰撞检测
				function isButt(obj1, obj2) {
					var l1 = obj1.offsetLeft;
					var t1 = obj1.offsetTop;
					var r1 = obj1.offsetLeft + obj1.offsetWidth;
					var b1 = obj1.offsetTop + obj1.offsetHeight;

					var l2 = obj2.offsetLeft;
					var t2 = obj2.offsetTop;
					var r2 = obj2.offsetLeft + obj2.offsetWidth;
					var b2 = obj2.offsetTop + obj2.offsetHeight;

					return !(r1 < l2 || b1 < t2 || r2 < l1 || b2 < t1)
				}

				//获取最终样式
				function getStyle(obj, attr) {
					return parseFloat(obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr])
				}

				//运动框架
				function startMove(obj, pos, onEnd) {
					clearInterval(obj.timer);
					obj.timer = setInterval(function () {
						doMove(obj, pos, onEnd)
					}, 30)
				}

				function doMove(obj, pos, onEnd) {
					var iCurL = getStyle(obj, "left");
					var iCurT = getStyle(obj, "top");
					var iSpeedL = (pos.left - iCurL) / 5;
					var iSpeedT = (pos.top - iCurT) / 5;
					iSpeedL = iSpeedL > 0 ? Math.ceil(iSpeedL) : Math.floor(iSpeedL);
					iSpeedT = iSpeedT > 0 ? Math.ceil(iSpeedT) : Math.floor(iSpeedT);
					if (pos.left == iCurL && pos.top == iCurT) {
						clearInterval(obj.timer);
						onEnd && onEnd()
					} else {
						obj.style.left = iCurL + iSpeedL + "px";
						obj.style.top = iCurT + iSpeedT + "px";
					}
				}

				//树列表  复选框
				let leng = 0
				let list = []
				var notCheckedArr = [];
				$(".each-tree input[type=checkbox]").click(function () {
					var cks = $(".each-tree :checked");
					leng = cks.length;

					if (leng > 3) {
						if (leng === 4) setckList(cks)

						layer.msg('最多只能选择四个,多余无效!')
						//未被选中的存储,然后禁止点击
						$("input[type=checkbox]:not(:checked)").each(function () {
							notCheckedArr.push($(this));
						});
						notCheckedArr.forEach(item => {
							item.attr("disabled", 'disabled');;
							item.attr("checked", false);;
						})
					} else {
						//少于选中次数,移除禁止效果
						notCheckedArr.forEach(item => {
							item.removeAttr("disabled");
						})
						notCheckedArr = []
						setckList(cks)

					}

					console.log(list)
				})
				//选中的数据存储
				function setckList(cks) {
					list = []
					cks.each(function (k, v) {
						list[list.length] = $(v).val();
					});
				}


				let isselect = false
				//四宫格显示
				$("#four-box").click(function () {

					$('#box-six').hide();
					$('#box-eight').hide();
					$('#box-nine').hide();
					$('.each-box').css('width', '45%')
					$('.each-box').css('height', '46%')
					if (!isselect) {
						$('#box-four').show();

						zIndexFour = 1
						refreshLayout(aLiFour, zIndexFour)
						layer.msg('再次点击,解锁其他按钮')
						$('#six-box').addClass("notclick")
						$('#eight-box').addClass("notclick")
						$('#nine-box').addClass("notclick")
						$('#img-six').attr('src', './images/noClick.png');
						$('#img-eight').attr('src', './images/noClick.png');
						$('#img-nine').attr('src', './images/noClick.png');
						isselect = true
					} else {
						$('#six-box').removeClass("notclick")
						$('#eight-box').removeClass("notclick")
						$('#nine-box').removeClass("notclick")
						$('#img-six').attr('src', './images/logo.png');
						$('#img-eight').attr('src', './images/logo.png');
						$('#img-nine').attr('src', './images/logo.png');
						isselect = false
					}


				})
				//六宫格显示
				$("#six-box").click(function () {

					$('.each-box').css('width', '30%')
					$('.each-box').css('height', '46%')
					$('#box-four').hide();
					$('#box-eight').hide();
					$('#box-nine').hide();
					if (!isselect) {
						$('#box-six').show();

						zIndexSix = 1
						refreshLayout(aLiSix, zIndexSix)
						layer.msg('再次点击,解锁其他按钮')
						$('#four-box').addClass("notclick")
						$('#eight-box').addClass("notclick")
						$('#nine-box').addClass("notclick")
						$('#img-four').attr('src', './images/noClick.png');
						$('#img-eight').attr('src', './images/noClick.png');
						$('#img-nine').attr('src', './images/noClick.png');
						isselect = true
					} else {
						$('#four-box').removeClass("notclick")
						$('#eight-box').removeClass("notclick")
						$('#nine-box').removeClass("notclick")
						$('#img-four').attr('src', './images/logo.png');
						$('#img-eight').attr('src', './images/logo.png');
						$('#img-nine').attr('src', './images/logo.png');
						isselect = false
					}
				})
				//八宫格显示
				$("#eight-box").click(function () {

					$('#box-four').hide();
					$('#box-six').hide();
					$('#box-nine').hide();
					$('.each-box').css('width', '20%')
					$('.each-box').css('height', '46%')
					if (!isselect) {
						$('#box-eight').show();

						zIndexEight = 1
						refreshLayout(aLiEight, zIndexEight)
						layer.msg('再次点击,解锁其他按钮')
						$('#six-box').addClass("notclick")
						$('#four-box').addClass("notclick")
						$('#nine-box').addClass("notclick")
						$('#img-six').attr('src', './images/noClick.png');
						$('#img-four').attr('src', './images/noClick.png');
						$('#img-nine').attr('src', './images/noClick.png');
						isselect = true
					} else {
						$('#six-box').removeClass("notclick")
						$('#four-box').removeClass("notclick")
						$('#nine-box').removeClass("notclick")
						$('#img-six').attr('src', './images/logo.png');
						$('#img-four').attr('src', './images/logo.png');
						$('#img-nine').attr('src', './images/logo.png');
						isselect = false
					}
				})
				//九宫格显示
				$("#nine-box").click(function () {

					$('#box-four').hide();
					$('#box-eight').hide();
					$('#box-six').hide();
					$('.each-box').css('width', '30%')
					$('.each-box').css('height', '30%')
					if (!isselect) {
						$('#box-nine').show();
						zIndexNine = 1
						refreshLayout(aLiNine, zIndexNine)
						layer.msg('再次点击,解锁其他按钮')
						$('#six-box').addClass("notclick")
						$('#eight-box').addClass("notclick")
						$('#four-box').addClass("notclick")
						$('#img-six').attr('src', './images/noClick.png');
						$('#img-eight').attr('src', './images/noClick.png');
						$('#img-four').attr('src', './images/noClick.png');
						isselect = true
					} else {
						$('#six-box').removeClass("notclick")
						$('#eight-box').removeClass("notclick")
						$('#four-box').removeClass("notclick")
						$('#img-six').attr('src', './images/logo.png');
						$('#img-eight').attr('src', './images/logo.png');
						$('#img-four').attr('src', './images/logo.png');
						isselect = false
					}
				})

				//树列表的展开和关闭
				//曲线分组1
				$('#group1').click(function () {
					if ($('#group1-con').is(":hidden")) {
						$('#img-arrow-g1').attr('src', './images/arrow-expand.png');
						$('#group1-con').show()
					} else {
						$('#img-arrow-g1').attr('src', './images/arrow-right.png');
						$('#group1-con').hide()
					}
				})
				//曲线分组2
				$('#group2').click(function () {
					if ($('#group2-con').is(":hidden")) {
						$('#img-arrow-g2').attr('src', './images/arrow-expand.png');
						$('#group2-con').show()
					} else {
						$('#img-arrow-g2').attr('src', './images/arrow-right.png');
						$('#group2-con').hide()
					}
				})
				//曲线分组3
				$('#group3').click(function () {
					if ($('#group3-con').is(":hidden")) {
						$('#img-arrow-g3').attr('src', './images/arrow-expand.png');
						$('#group3-con').show()
					} else {
						$('#img-arrow-g3').attr('src', './images/arrow-right.png');
						$('#group3-con').hide()
					}
				})
				//曲线分组4
				$('#group4').click(function () {
					if ($('#group4-con').is(":hidden")) {
						$('#img-arrow-g4').attr('src', './images/arrow-expand.png');
						$('#group4-con').show()
					} else {
						$('#img-arrow-g4').attr('src', './images/arrow-right.png');
						$('#group4-con').hide()
					}
				})


				//左侧列表向右拖拽
				$('#dtnxloc').bind('dragstart', function (e) {
					var data = e.originalEvent.dataTransfer
					data.setData('text/plain', $(this).find(".ckbox")[0].title)
				})

				$('#dtnyloc').bind('dragstart', function (e) {
					var data = e.originalEvent.dataTransfer
					data.setData('text/plain', $(this).find(".ckbox")[0].title)
				})
				$('#dtnxloc').bind('dragstart', function (e) {
					var data = e.originalEvent.dataTransfer
					data.setData('text/plain', $(this).find(".ckbox")[0].title)
				})
				$('#hspeedv').bind('dragstart', function (e) {
					var data = e.originalEvent.dataTransfer
					data.setData('text/plain', $(this).find(".ckbox")[0].title)
				})
				$('#dtnxspeed').bind('dragstart', function (e) {
					var data = e.originalEvent.dataTransfer
					data.setData('text/plain', $(this).find(".ckbox")[0].title)
				})
				$('#dtnyspeed').bind('dragstart', function (e) {
					var data = e.originalEvent.dataTransfer
					data.setData('text/plain', $(this).find(".ckbox")[0].title)
				})
				$('#dtnzspeed').bind('dragstart', function (e) {
					var data = e.originalEvent.dataTransfer
					data.setData('text/plain', $(this).find(".ckbox")[0].title)
				})
				$('#gddata-time').bind('dragstart', function (e) {
					var data = e.originalEvent.dataTransfer
					data.setData('text/plain', $(this).find(".ckbox")[0].title)
				})
				$('#dtnxloclzjsj').bind('dragstart', function (e) {
					var data = e.originalEvent.dataTransfer
					data.setData('text/plain', $(this).find(".ckbox")[0].title)
				})

				//曲线数组2的拖拽
				$('#dtnyloclzjsj').bind('dragstart', function (e) {
					var data = e.originalEvent.dataTransfer
					data.setData('text/plain', $(this).find(".ckbox")[0].title)
				})
				$('#dtnzloclzjsj').bind('dragstart', function (e) {
					var data = e.originalEvent.dataTransfer
					data.setData('text/plain', $(this).find(".ckbox")[0].title)
				})
				$('#dtnxspeedjsj').bind('dragstart', function (e) {
					var data = e.originalEvent.dataTransfer
					data.setData('text/plain', $(this).find(".ckbox")[0].title)
				})
				$('#dtnyspeedjsj').bind('dragstart', function (e) {
					var data = e.originalEvent.dataTransfer
					data.setData('text/plain', $(this).find(".ckbox")[0].title)
				})
				$('#dtnzspeedlzjsj').bind('dragstart', function (e) {
					var data = e.originalEvent.dataTransfer
					data.setData('text/plain', $(this).find(".ckbox")[0].title)
				})
				$('#week-second').bind('dragstart', function (e) {
					var data = e.originalEvent.dataTransfer
					data.setData('text/plain', $(this).find(".ckbox")[0].title)
				})
				$('#ball-instance').bind('dragstart', function (e) {
					var data = e.originalEvent.dataTransfer
					data.setData('text/plain', $(this).find(".ckbox")[0].title)
				})
				$('#dxdheight').bind('dragstart', function (e) {
					var data = e.originalEvent.dataTransfer
					data.setData('text/plain', $(this).find(".ckbox")[0].title)
				})
				$('#fyztj').bind('dragstart', function (e) {
					var data = e.originalEvent.dataTransfer
					data.setData('text/plain', $(this).find(".ckbox")[0].title)
				})














				$('#4first-one').bind('dragover', function (e) {
					e.originalEvent.preventDefault()

				})

				$('#4first-one').bind('drop', function (e) {
					var text = e.originalEvent.dataTransfer.getData('text/plain')
					layer.msg(`获取拖拽数据${text}`)
					$(this).css('background', '#10100030')
					let that = this
					setTimeout(function () { $(that).css('background', 'transparent') }, 100)
				})


				$('#4first-two').bind('dragover', function (e) {
					e.originalEvent.preventDefault()

				})

				$('#4first-two').bind('drop', function (e) {
					var text = e.originalEvent.dataTransfer.getData('text/plain')
					layer.msg(`获取拖拽数据${text}`)
					$(this).css('background', '#10100030')
					let that = this
					setTimeout(function () { $(that).css('background', 'transparent') }, 100)
				})

				$('#4second-one').bind('dragover', function (e) {
					e.originalEvent.preventDefault()

				})

				$('#4second-one').bind('drop', function (e) {
					var text = e.originalEvent.dataTransfer.getData('text/plain')
					layer.msg(`获取拖拽数据${text}`)
					$(this).css('background', '#10100030')
					let that = this
					setTimeout(function () { $(that).css('background', 'transparent') }, 100)
				})


				$('#4second-two').bind('dragover', function (e) {
					e.originalEvent.preventDefault()

				})

				$('#4second-two').bind('drop', function (e) {
					var text = e.originalEvent.dataTransfer.getData('text/plain')
					layer.msg(`获取拖拽数据${text}`)
					$(this).css('background', '#10100030')
					let that = this
					setTimeout(function () { $(that).css('background', 'transparent') }, 100)
				})


				$('#6first-one').bind('dragover', function (e) {
					e.originalEvent.preventDefault()

				})

				$('#6first-one').bind('drop', function (e) {
					var text = e.originalEvent.dataTransfer.getData('text/plain')
					layer.msg(`获取拖拽数据${text}`)
					$(this).css('background', '#10100030')
					let that = this
					setTimeout(function () { $(that).css('background', 'transparent') }, 100)
				})


				$('#6first-two').bind('dragover', function (e) {
					e.originalEvent.preventDefault()

				})

				$('#6first-two').bind('drop', function (e) {
					var text = e.originalEvent.dataTransfer.getData('text/plain')
					layer.msg(`获取拖拽数据${text}`)
					$(this).css('background', '#10100030')
					let that = this
					setTimeout(function () { $(that).css('background', 'transparent') }, 100)
				})


				$('#6first-three').bind('dragover', function (e) {
					e.originalEvent.preventDefault()

				})

				$('#6first-three').bind('drop', function (e) {
					var text = e.originalEvent.dataTransfer.getData('text/plain')
					layer.msg(`获取拖拽数据${text}`)
					$(this).css('background', '#10100030')
					let that = this
					setTimeout(function () { $(that).css('background', 'transparent') }, 100)
				})
				$('#6second-one').bind('dragover', function (e) {
					e.originalEvent.preventDefault()

				})

				$('#6second-one').bind('drop', function (e) {
					var text = e.originalEvent.dataTransfer.getData('text/plain')
					layer.msg(`获取拖拽数据${text}`)
					$(this).css('background', '#10100030')
					let that = this
					setTimeout(function () { $(that).css('background', 'transparent') }, 100)
				})


				$('#6second-two').bind('dragover', function (e) {
					e.originalEvent.preventDefault()

				})

				$('#6second-two').bind('drop', function (e) {
					var text = e.originalEvent.dataTransfer.getData('text/plain')
					layer.msg(`获取拖拽数据${text}`)
					$(this).css('background', '#10100030')
					let that = this
					setTimeout(function () { $(that).css('background', 'transparent') }, 100)
				})


				$('#6second-three').bind('dragover', function (e) {
					e.originalEvent.preventDefault()

				})

				$('#6second-three').bind('drop', function (e) {
					var text = e.originalEvent.dataTransfer.getData('text/plain')
					layer.msg(`获取拖拽数据${text}`)
					$(this).css('background', '#10100030')
					let that = this
					setTimeout(function () { $(that).css('background', 'transparent') }, 100)
				})


				$('#8first-one').bind('dragover', function (e) {
					e.originalEvent.preventDefault()

				})

				$('#8first-one').bind('drop', function (e) {
					var text = e.originalEvent.dataTransfer.getData('text/plain')
					layer.msg(`获取拖拽数据${text}`)
					$(this).css('background', '#10100030')
					let that = this
					setTimeout(function () { $(that).css('background', 'transparent') }, 100)
				})


				$('#8first-two').bind('dragover', function (e) {
					e.originalEvent.preventDefault()

				})

				$('#8first-two').bind('drop', function (e) {
					var text = e.originalEvent.dataTransfer.getData('text/plain')
					layer.msg(`获取拖拽数据${text}`)
					$(this).css('background', '#10100030')
					let that = this
					setTimeout(function () { $(that).css('background', 'transparent') }, 100)
				})


				$('#8first-three').bind('dragover', function (e) {
					e.originalEvent.preventDefault()

				})

				$('#8first-three').bind('drop', function (e) {
					var text = e.originalEvent.dataTransfer.getData('text/plain')
					layer.msg(`获取拖拽数据${text}`)
					$(this).css('background', '#10100030')
					let that = this
					setTimeout(function () { $(that).css('background', 'transparent') }, 100)
				})


				$('#8first-four').bind('dragover', function (e) {
					e.originalEvent.preventDefault()

				})

				$('#8first-four').bind('drop', function (e) {
					var text = e.originalEvent.dataTransfer.getData('text/plain')
					layer.msg(`获取拖拽数据${text}`)
					$(this).css('background', '#10100030')
					let that = this
					setTimeout(function () { $(that).css('background', 'transparent') }, 100)
				})


			
				$('#8second-one').bind('dragover', function (e) {
					e.originalEvent.preventDefault()

				})

				$('#8second-one').bind('drop', function (e) {
					var text = e.originalEvent.dataTransfer.getData('text/plain')
					layer.msg(`获取拖拽数据${text}`)
					$(this).css('background', '#10100030')
					let that = this
					setTimeout(function () { $(that).css('background', 'transparent') }, 100)
				})


				$('#8second-two').bind('dragover', function (e) {
					e.originalEvent.preventDefault()

				})

				$('#8second-two').bind('drop', function (e) {
					var text = e.originalEvent.dataTransfer.getData('text/plain')
					layer.msg(`获取拖拽数据${text}`)
					$(this).css('background', '#10100030')
					let that = this
					setTimeout(function () { $(that).css('background', 'transparent') }, 100)
				})

				

				$('#8second-three').bind('dragover', function (e) {
					e.originalEvent.preventDefault()

				})

				$('#8second-three').bind('drop', function (e) {
					var text = e.originalEvent.dataTransfer.getData('text/plain')
					layer.msg(`获取拖拽数据${text}`)
					$(this).css('background', '#10100030')
					let that = this
					setTimeout(function () { $(that).css('background', 'transparent') }, 100)
				})

				$('#8second-four').bind('dragover', function (e) {
					e.originalEvent.preventDefault()

				})

				$('#8second-four').bind('drop', function (e) {
					var text = e.originalEvent.dataTransfer.getData('text/plain')
					layer.msg(`获取拖拽数据${text}`)
					$(this).css('background', '#10100030')
					let that = this
					setTimeout(function () { $(that).css('background', 'transparent') }, 100)
				})

				
				$('#9first-one').bind('dragover', function (e) {
					e.originalEvent.preventDefault()

				})

				$('#9first-one').bind('drop', function (e) {
					var text = e.originalEvent.dataTransfer.getData('text/plain')
					layer.msg(`获取拖拽数据${text}`)
					$(this).css('background', '#10100030')
					let that = this
					setTimeout(function () { $(that).css('background', 'transparent') }, 100)
				})


				$('#9first-two').bind('dragover', function (e) {
					e.originalEvent.preventDefault()

				})

				$('#9first-two').bind('drop', function (e) {
					var text = e.originalEvent.dataTransfer.getData('text/plain')
					layer.msg(`获取拖拽数据${text}`)
					$(this).css('background', '#10100030')
					let that = this
					setTimeout(function () { $(that).css('background', 'transparent') }, 100)
				})


				$('#9first-three').bind('dragover', function (e) {
					e.originalEvent.preventDefault()

				})

				$('#9first-three').bind('drop', function (e) {
					var text = e.originalEvent.dataTransfer.getData('text/plain')
					layer.msg(`获取拖拽数据${text}`)
					$(this).css('background', '#10100030')
					let that = this
					setTimeout(function () { $(that).css('background', 'transparent') }, 100)
				})


				$('#9second-one').bind('dragover', function (e) {
					e.originalEvent.preventDefault()

				})

				$('#9second-one').bind('drop', function (e) {
					var text = e.originalEvent.dataTransfer.getData('text/plain')
					layer.msg(`获取拖拽数据${text}`)
					$(this).css('background', '#10100030')
					let that = this
					setTimeout(function () { $(that).css('background', 'transparent') }, 100)
				})


				$('#9second-two').bind('dragover', function (e) {
					e.originalEvent.preventDefault()

				})

				$('#9second-two').bind('drop', function (e) {
					var text = e.originalEvent.dataTransfer.getData('text/plain')
					layer.msg(`获取拖拽数据${text}`)
					$(this).css('background', '#10100030')
					let that = this
					setTimeout(function () { $(that).css('background', 'transparent') }, 100)
				})


				$('#9second-three').bind('dragover', function (e) {
					e.originalEvent.preventDefault()

				})

				$('#9second-three').bind('drop', function (e) {
					var text = e.originalEvent.dataTransfer.getData('text/plain')
					layer.msg(`获取拖拽数据${text}`)
					$(this).css('background', '#10100030')
					let that = this
					setTimeout(function () { $(that).css('background', 'transparent') }, 100)
				})


			

				$('#9third-one').bind('dragover', function (e) {
					e.originalEvent.preventDefault()

				})

				$('#9third-one').bind('drop', function (e) {
					var text = e.originalEvent.dataTransfer.getData('text/plain')
					layer.msg(`获取拖拽数据${text}`)
					$(this).css('background', '#10100030')
					let that = this
					setTimeout(function () { $(that).css('background', 'transparent') }, 100)
				})

				$('#9third-two').bind('dragover', function (e) {
					e.originalEvent.preventDefault()

				})

				$('#9third-two').bind('drop', function (e) {
					var text = e.originalEvent.dataTransfer.getData('text/plain')
					layer.msg(`获取拖拽数据${text}`)
					$(this).css('background', '#10100030')
					let that = this
					setTimeout(function () { $(that).css('background', 'transparent') }, 100)
				})

				$('#9third-three').bind('dragover', function (e) {
					e.originalEvent.preventDefault()

				})

				$('#9third-three').bind('drop', function (e) {
					var text = e.originalEvent.dataTransfer.getData('text/plain')
					layer.msg(`获取拖拽数据${text}`)
					$(this).css('background', '#10100030')
					let that = this
					setTimeout(function () { $(that).css('background', 'transparent') }, 100)
				})
			})



		</script>
</body>

</html>